<template>
  <div class="addinter-content" v-loading="loading">
    <div class="addinter-content-left">
      <el-card>
        <el-tree :data="treeData" :props="defaultProps" default-expand-all />
      </el-card>
    </div>
    <div class="addinter-content-right">
      <el-card>
        <el-transfer
          v-model="value"
          :data="transferData"
          :titles="['未选择', '已选择']"
          :button-texts="['删除', '添加']"
          @change="updateValue"
        ></el-transfer>
      </el-card>
    </div>
  </div>
</template>

<script>
// 1、获取计划接口全部数据 2、获取项目全部接口。
import {
  listPlanInter,
  addInterface,
  delPlanInter,
} from "@/api/dmsIms/planinter";
import { SimplelistInterface } from "@/api/dmsIms/interface";
export default {
  name: "AddInter",
  props: ["planId", "proId", "planName"],
  watch: {
    // 监听planId，如果planId传入的值改变了，就重新调用获取计划接口。
    planId: {
      handler() {
        this.reflashTree();
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      queryParams: {
        interOfpro: null,
      },
      transferData: [],
      value: [],
      treeData: [
        {
          label: "",
          children: [],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    updateValue(val, option, newVal) {
      //val：当前value的值。option：left表示删除，right表示添加
      let values = [];
      if (option === "right") {
        newVal.forEach((elem) => {
          values.push({
            planId: this.planId,
            interId: elem,
          });
        });
        addInterface(values).then((response) => {
          this.reflashTree();
          if (response.code === 200) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "添加失败",
              type: "error",
            });
          }
        });
      }
      if (option === "left") {
        let ids = newVal.join(",");
        this.$confirm("你确定要从测试计划中移除这些接口吗？", "确认删除", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error",
        })
          .then(() => {
            delPlanInter(this.planId, ids)
              .then(() => {
                this.reflashTree();
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              })
              .catch(() => {
                this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              });
          })
          .catch(() => {
            this.value = this.value.concat(newVal);
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    reflashTree() {
      this.loading = true;
      this.treeData[0].label = this.planName;
      this.treeData[0].children = [];
      this.transferData = [];
      // this.planId = val;
      this.value = [];
      listPlanInter(this.planId)
        .then((response) => {
          response.rows.forEach((ele) => {
            this.treeData[0].children.push({ label: ele.interName });
            this.value.push(ele.interId);
          });
          // console.log(this.treeData[0].children);
          // console.log(this.value);
        })
        .then(() => {
          SimplelistInterface(this.proId).then((response) => {
            response.rows.forEach((elem) => {
              this.transferData.push({
                key: elem.id,
                label: elem.interName,
              });
            });
            this.loading = false;
          });
        });
      // console.log(this.value);
    },
  },
};
</script>

<style scoped>
.addinter-content {
  display: flex;
}
.addinter-content-left {
  width: 20vw;
  margin-right: 20px;
  height: 50vh;
  overflow: auto;
}
.addinter-content-right {
  width: 50vw;
}
</style>
